import { Button, Cascader, Radio, RadioChangeEvent, Select } from 'antd'
import React from 'react'
import './style.scss'
import { storeAll } from '@/store';
import { observer } from 'mobx-react-lite';
import { OptionType } from '@/store/parking';

const options: OptionType[] = Array(4).fill(0).map((item, index) => {
	return {
		value: index + 1,
		label: index + 1,
		children: Array(5).fill(0).map((item, index) => {
			return {
				value: index + 1,
				label: index + 1,
				children: Array(10).fill(0).map((item, index) => ({
					value: index + 1,
					label: index + 1,
				}))
			}
		})
	}
})
const HeaderSearch: React.FC = () => {
	const { parkingLotTypeStore: { parkingLotType }, parkingStore: { position, status, types, setPosition, setStatus, setTypes, searchBy } } = storeAll
	const selectType = parkingLotType.map(item => ({
		value: item.id,
		label: item.notes
	}))

	const cascaderChange = (value: any) => {
		setPosition(value)
	};
	const statusChange = (e: RadioChangeEvent) => {
		if (e.target.value === status) return setStatus(undefined)
		setStatus(e.target.value)
	}
	const typeChange = (type: number) => {
		setTypes(type)
	}
	return <div className="headerSearchWrap">
		<span>筛选条件：</span>
		<Cascader options={options} value={position || []} placeholder="位置" onChange={cascaderChange} />
		<Radio.Group style={{ marginLeft: 20 }} value={status} onChange={statusChange}>
			<Radio value={0}>空闲</Radio>
			<Radio value={1}>被占用</Radio>
			<Radio value={''}>取消选中</Radio>
		</Radio.Group>
		<Select style={{ marginLeft: 20 }} showSearch placeholder="筛选类型" value={types} options={selectType} onChange={typeChange} allowClear></Select>
		<Button type="primary" style={{ marginLeft: 20 }} onClick={searchBy}>开始查找</Button>
	</div>
}

export default observer(HeaderSearch)



